<template>
  <div>{{ name }}</div>
  <div>身高：{{ person.height }}</div>
  <div>体重：{{ person.weight }}</div>
  <demo name="pink" :age="18" @hello="showHelloMessage">
    <template v-slot:qer>
      <span>hah </span>
    </template>
  </demo>
  <button @click="changeName">点击修改name的值</button>
  <button @click="changePerson">点击修改person的值</button>
  <br />
  <br />
  <input type="text" v-model="hardkai.firstName" />
  <input type="text" v-model="hardkai.lastName" />
  <span>全名：{{ fullName }}</span>
  <input type="text" v-model="fullName" />
</template>
<script>
import Demo from "../components/demo.vue";
import { reactive, ref, computed } from "vue";
export default {
  name: "Ref",
  components: { demo: Demo },
  setup() {
    let name = ref("pink");
    let changeName = () => {
      name.value = "张三";
    };

    let person = reactive({
      height: "180",
      weight: "70kg",
    });

    let changePerson = () => {
      person.height = "170";
      person.weight = "60kg";
      console.log(person);
    };

    let showHelloMessage = (value) => {
      console.log("我给你打招呼" + value);
    };

    let hardkai = reactive({
      firstName: "sun",
      lastName: "kai",
    });
    //简写没有考虑计算属性被修改的情况
    // let fullName = computed(() => {
    //   return hardkai.firstName + "-" + hardkai.lastName;
    // });

    //完整写法，考虑计算属性被修改的情况
    let fullName = computed({
      get() {
        return hardkai.firstName + "-" + hardkai.lastName;
      },
      set(value) {
        const arrName = value.split("-");
        hardkai.firstName = arrName[0];
        hardkai.lastName = arrName[1];
      },
    });
    return {
      name,
      changeName,
      person,
      showHelloMessage,
      changePerson,
      hardkai,
      fullName,
    };
  },
};
</script>